<template>
  <!-- active是class名  isActive是变量修改true false的-->
  <div
    class="ac"
    v-bind:class="{ active: isActive, font: fontSize }"
    @click="color"
  >
    <!-- <ul> -->
    <!-- 隔行变色 -->
    <!-- <li
        class="wz"
        v-for="(value, index) in arr"
        :key="index"
        v-bind:class="{ wzys: index % 2 == 0 }"
        >
        {{ value }}
      </li> -->

    <!-- 选项卡事件 -->
    <!-- <li
        class="wz"
        v-for="(value, index) in arr"
        :key="index"
        v-bind:class="{ wzys: index==tabindex }"
        @click="dj(index)"
      >
        {{ value }}
      </li>
    </ul> -->

    <!-- 导航切换 -->
    <ul>
      <li
        class="wz"
        v-for="(value, index) in arr"
        :key="index"
        v-bind:class="{ wzys: index == tabindex }"
        @click="xz(index)"
      >
        {{ value }}
      </li>
    </ul>
    <p :class="calssObj"></p>
    <p :class="[isActive ? 'active' : '']">1</p>
    <div class="da" @click="da1" v-bind:style="{ fontSize: width1 + 'px' }">
      1
    </div>
  </div>
</template>
<style>
.da {
  border: 1px solid #000;
}
ul {
  overflow: hidden;
}
li {
  width: 60px;
  height: 20px;
  float: left;
  list-style: none;
}
.ac {
  border: 1px solid #000;
}
.font {
  font-size: 20px;
}
.wz {
  color: aqua;
  margin-right: 10px;
  margin-left: 10px;
  text-align: center;
}
.wzys {
  background: pink;
}
.yanse {
  color: #005;
}
.active {
  color: red;
}
</style>
<script>
export default {
  data() {
    return {
      isActive: true,
      fontSize: true,
      arr: [1, 2, 3, 4],
      yanse: true,
      tabindex: 0,
      calssObj: {
        font: true,
        yanse: true,
        ac: "active",
      },
      n: 0,
      width1: 20,
    };
  },
  methods: {
    color() {
      this.isActive = !this.isActive;
    },
    // dj(index) {
    //   this.tabindex = index;
    // },
    xz(index) {
      this.tabindex = index;
    },
    da1() {
      this.n++;
      console.log(this.n);
      this.width1 = this.width1 * this.n;
    },
  },
};
</script>
